<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>文档移动</title>
	    <script type="text/javascript" src="./jquery-3.2.1.min.js"></script>
	    <style>
          select{width:140px; height:260px;}
	    </style>
	    <script>
        function toRight (){
           $('#hebei option:selected').appendTo($('#shandong'));
        }
        function toLeft (){
           $('#shandong option:selected').appendTo($('#hebei'))
        }
        function toAllRight(){
           $('#hebei option').appendTo($('#shandong'));
        }
        function toAllLeft(){
        	$('#shandong option').appendTo($('#hebei'));
        }
        $(function(){

           $('option').dblclick(function(){

             if(this.parentNode.id=='hebei'){

              $(this).appendTo($('#shandong'));

             }else{
              $(this).appendTo($('#hebei'));
             }

           });

        })
	    </script>
	</head>
	<body>
		<select id="hebei" multiple="multiple">	
			<option>石家庄</option>
			<option>邯郸</option>
			<option>保定</option>
			<option>廊坊</option>
			<option>唐山</option>
		</select>
		<select id="shandong" multiple="multiple">	
			<option>济南</option>
			<option>青岛</option>
			<option>日照</option>
			<option>烟台</option>
			<option>淄博</option>
		</select></br></br>
		<input type="button" value="-->" onclick="toRight()">
		<input type="button" value="<--" onclick="toLeft()">
		<input type="button" value="==>" onclick="toAllRight()">
		<input type="button" value="<==" onclick="toAllLeft()">
	</body>
</html>